<template>
  <div>
    <a-card>
      <div id="barChart_example"></div>
    </a-card>
  </div>
</template>

<script>
export default {
  name: "BarChart",
  data(){
    return{

      //定义1个undefined对象，用来mounted初始化echarts
      myChart: undefined,


      cfg2:{
        title: {
          text: 'ECharts 柱状图示例'
        },
        // color: ['#f44'],  配色
        //hover悬浮提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        //标注
        legend: {
          data:['销量']
        },
        //横轴
        xAxis: {
          type: 'category',
          name: '类别',
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","棉袄","夹克"],
          axisTick: {
            alignWithLabel: true
          }
        },
        //纵轴,可以不规定刻度data属性
        yAxis: [
          {
            type: 'value',
            name: '月销量',
          }
        ],
        //柱状图数据
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20,50,30]
        }]
      }

    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('barChart_example'));
    this.myChart.setOption(this.cfg2);


  },
  methods:{
    reSizeBarChart(){
      this.myChart.resize();
      // this.myChart.refresh();
      // this.$forceUpdate();
    }
  }
}
</script>

<style scoped>
#barChart_example {
  margin: 0 auto;
  width: 100%;
  height: 500px;
  padding: 0;
  /*border: 1px solid red;*/
}
</style>